
import React from 'react';
import { connect } from 'dva';
import PropTypes from 'prop-types';
import { Icon, Card } from 'antd';
import CountUp from 'react-countup';
import styles from './CardNum.less';


class CardNum extends React.Component {
  constructor(...args) {
    super(...args);
  }
  render() {
    const { icon, title, msg, bg } = this.props;
    let data = (msg.lastday - msg.last7day) / msg.last7day * 100 || 0;
    let myicon = (<Icon className={styles.icon} type="arrow-down" />);
    if (data >= 0) {
      myicon = ((<Icon className={styles.icon} type="arrow-up" />));
    }
    data == Infinity ? data = 0 : data;

    return (
      <Card className={styles.numberCard} bordered={false} bodyStyle={{ padding: 0 }} style={{ background: bg }}>
        <Icon className={styles.iconWarp} type={icon} />
        <div className={styles.content}>
          <p className={styles.title}>{title || 'No Title'}</p>
          <p className={styles.number}>
            <CountUp
              start={0}
              end={msg.today}
              duration={2.75}
              useEasing
              useGrouping
              separator=","
            />
          </p>

          <p> <span>{`${data.toFixed(0)}%`}</span>{myicon}</p>
        </div>
      </Card>
    );
  }
}

CardNum.propTypes = {
  msg: PropTypes.object,
  icon: PropTypes.string,
  title: PropTypes.string,
  bg: PropTypes.string,
};


// const CardNum = ({})=>{

// }

export default connect()(CardNum);
